{% extends 'layouts/layout_user.html' %}
{% block title %}
Dashboard | {{ config['PUBLIC_CONFIG'].site.title }}
{% endblock %}
{% block styles %}
<style>
        table {
            table-layout: fixed;
        }
        th.stream_number {
            width: 2%;
        }
        th.stream_name {
            width: 18%;
        }
        th.stream_type {
            width: 5%;
        }
        th.stream_status {
            width: 5%;
        }
        th.stream_restarts {
            width: 4%;
        }
        th.stream_cpu {
            width: 5%;
        }
        th.stream_rss {
            width: 5%;
        }
        th.stream_inbps {
            width: 5%;
        }
        th.stream_outbps {
            width: 6%;
        }
        th.stream_work_time {
            width: 5%;
        }
        th.stream_live_time {
            width: 5%;
        }
        th.stream_quality {
            width: 5%;
        }
        th.stream_price {
            width: 5%;
        }
        th.stream_view {
            width: 5%
        }
        th.stream_actions {
            width: 20%;
        }

</style>
{{super()}}
{% endblock %}

{% block content %}
<div class="panel panel-default">
    <div class="panel-heading">
        <h1 class="panel-title">
            <div class="col-md-11">
                <a href="{{ url_for('HomeView:index') }}">{{ config['PUBLIC_CONFIG'].site.title }}</a>
            </div>
            <div>Version: {{ config['PUBLIC_CONFIG'].project.version }}</div>
        </h1>
    </div>
    <div class="panel-body">
        <div class="container-fluid">
            <div class="row well">
                <div class="row">
                    <div class="col-md-1">
                        <img width="64px" height="64px" src="{{ url_for('static', filename='images/logo.png') }}"/>
                    </div>
                    <div class="col-md-4">
                        <p>Welcome {{ current_user.email }}</p>
                    </div>
                    <div class="col-md-1">
                        <a href="{{ url_for('ProviderView:settings') }}" class="btn btn-info" role="button">
                            Settings
                        </a>
                    </div>
                    <div class="col-md-1">
                        <a href="{{ url_for('ProviderView:logout') }}" class="btn btn-warning" role="button">
                            Logout
                        </a>
                    </div>
                    {% if (current_user.type != 0) %}
                    <div class="col-md-1">
                        <a href="{{ url_for('ProviderView:remove') }}" class="btn btn-danger" role="button">
                            Delete
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
            <div class="row well">
                <div class="row">
                    <div class="col-md-1">
                        <select class="form-control" name="servers" onchange=OnServerChanged(this.value);>
                            {% for server in servers %}
                            {% if (service.id == server.id | string) %}
                            <option value="{{ loop.index0 }}" selected>{{ server.name }}</option>
                            {% else %}
                            <option value="{{ loop.index0 }}">{{ server.name }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-1">
                        {% if (service.status == service.status.INIT) %}
                        <a href="{{ url_for('ServiceView:connect') }}" class="btn btn-info" role="button">
                            Connect
                        </a>
                        {% else %}
                        <a href="{{ url_for('ServiceView:disconnect') }}" class="btn btn-info" role="button">
                            Disconnect
                        </a>
                        {% endif %}
                    </div>
                    <div class="col-md-1">
                        <a href="{{ url_for('ServiceView:activate') }}" role="button"
                           {% if (service.status== service.status.INIT) %}
                           class="btn btn-info disabled"
                           {% else %}
                           class="btn btn-info"
                           {% endif %}>
                            Activate
                        </a>
                    </div>
                    <div class="col-md-1">
                        <a href="{{ url_for('ServiceView:sync') }}" role="button"
                           {% if (service.status== service.status.INIT) %}
                           class="btn btn-info disabled"
                           {% else %}
                           class="btn btn-info"
                           {% endif %}>
                            Sync
                        </a>
                    </div>
                    <div class="col-md-1">
                        <a href="{{ url_for('ServiceView:playlist', sid=service.id) }}" class="btn btn-success"
                           role="button">
                            Playlist
                        </a>
                    </div>
                    <div class="col-md-1">
                        <a href="{{ url_for('ServiceView:upload_m3u') }}" role="button" class="btn btn-success">
                            Upload m3u
                        </a>
                    </div>
                    <div class="col-md-1">
                        <a href="{{ url_for('ServiceView:ping') }}" role="button"
                           {% if (service.status== service.status.ACTIVE) %}
                           class="btn btn-info"
                           {% else %}
                           class="btn btn-info disabled"
                           {% endif %}>
                            Ping
                        </a>
                    </div>
                    <div class="col-md-1">
                        <a href="{{ url_for('ServiceView:stop') }}" role="button"
                           {% if (service.status== service.status.ACTIVE) %}
                           class="btn btn-warning"
                           {% else %}
                           class="btn btn-warning disabled"
                           {% endif %}>
                            Stop
                        </a>
                    </div>
                    <div class="col-md-1">
                        <a href="{{ url_for('ServiceView:providers', sid=service.id) }}" class="btn btn-success"
                           role="button">
                            Providers
                        </a>
                    </div>
                    {% if (role == 2) %}
                    <div class="col-md-1">
                        <a href="{{ url_for('ServiceView:get_log') }}" role="button"
                           {% if (service.status== service.status.ACTIVE) %}
                           class="btn btn-success"
                           {% else %}
                           class="btn btn-success disabled"
                           {% endif %}>
                            Get log
                        </a>
                    </div>
                    <div class="col-md-1">
                        <a href="{{ url_for('ServiceView:view_log') }}" role="button" class="btn btn-info">
                            View log
                        </a>
                    </div>
                    {% endif %}
                </div>
                </br>
                <div class="row">
                    <div class="col-md-2">
                        <b>ID:</b>
                        <p id='service_id'>{{ service.id }}</p>
                    </div>
                    <div class="col-md-2">
                        <b>Timestamp:</b>
                        <p id='service_timestamp'>{{ service.timestamp }}</p>
                    </div>
                    <div class="col-md-2">
                        <b>Uptime:</b>
                        <p id='service_uptime'>{{ service.uptime }} Seconds</p>
                    </div>
                    <div class="col-md-2">
                        <b>Load:</b>
                        <p id='service_load_average'>{{ service.load_average }}</p>
                    </div>
                    <div class="col-md-2">
                        <b>State:</b>
                        <p id='service_status'>{{ ['INIT', 'CONNECTED', 'ACTIVE'][service.status] }}</p>
                    </div>
                    <div class="col-md-2">
                        <b>Sync time:</b>
                        <p id='service_sync'>{{ service.synctime }}</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <b>CPU:</b>
                        <p id='service_cpu'>{{ service.cpu | round(2, 'floor') }} %</p>
                    </div>
                    <div class="col-md-2">
                        <b>GPU:</b>
                        <p id='service_gpu'>{{ service.gpu }} %</p>
                    </div>
                    <div class="col-md-2">
                        <b>Network in:</b>
                        <p id='service_bandwidth_in'>{{ service.bandwidth_in }} Mbps</p>
                    </div>
                    <div class="col-md-2">
                        <b>Network out:</b>
                        <p id='service_bandwidth_out'>{{ service.bandwidth_out }} Mbps</p>
                    </div>
                    <div class="col-md-2">
                        <b>OS:</b>
                        <p id='service_os'>{{ service.os }}</p>
                    </div>
                    <div class="col-md-2">
                        <b>Expiration date:</b>
                        <p id='service_exp_time'>{{ service.exp_time }}</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <b>Memory total:</b>
                        <p id='service_memory_total'>{{ service.memory_total }} MB</p>
                    </div>
                    <div class="col-md-2">
                        <b>Memory free:</b>
                        <p id='service_memory_free'>{{ service.memory_free }} MB</p>
                    </div>
                    <div class="col-md-2">
                        <b>HDD total:</b>
                        <p id='service_hdd_total'>{{ service.hdd_total }} MB</p>
                    </div>
                    <div class="col-md-2">
                        <b>HDD free:</b>
                        <p id='service_hdd_free'>{{ service.hdd_free }} MB</p>
                    </div>
                    <div class="col-md-2">
                        <b>Online users:</b>
                        <p id='service_connections'>{{ service.online_users }}</p>
                    </div>
                    <div class="col-md-2">
                        <b>Version ({{ service.project }}):</b>
                        <p id='service_version'>{{ service.version }}</p>
                    </div>
                </div>
            </div>
            <div class="row well with-nav-tabs">
                <div class="panel-heading">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#streams" data-toggle="tab">Streams</a></li>
                        <li><a href="#vods" data-toggle="tab">Video on demand</a></li>
                        <li><a href="#cods" data-toggle="tab">Channel on demand</a></li>
                        <li><a href="#proxy" data-toggle="tab">Proxy</a></li>
                        <li><a href="#catchups" data-toggle="tab">Catchups</a></li>
                        <li><a href="#events" data-toggle="tab">Events (Pay per view)</a></li>
                        <li><a href="#tests" data-toggle="tab">Tests</a></li>
                    </ul>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="streams">
                            <div class="row">
                                <table id='streams_table' class="table">
                                    <thead>
                                    <tr>
                                        <th class="stream_number">#</th>
                                        <th class="stream_name">Name</th>
                                        <th class="stream_type">Type</th>
                                        <th class="stream_status">Status</th>
                                        <th class="stream_restarts">Restarts</th>
                                        <th class="stream_cpu">CPU (%)</th>
                                        <th class="stream_rss">RSS (MB)</th>
                                        <th class="stream_inbps">In (Mbps)</th>
                                        <th class="stream_outbps">Out (Mbps)</th>
                                        <th class="stream_work_time">TTL (sec)</th>
                                        <th class="stream_live_time">RTL (sec)</th>
                                        <th class="stream_quality">Quality (%)</th>
                                        <th class="stream_price">Price ($)</th>
                                        <th class="stream_view">Views</th>
                                        <th class="stream_actions">Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for rev in streams %}
                                    <tr id='{{ rev.id }}'>
                                        <td>{{ loop.index }}</td>
                                        <td>
                                            <img width="32px" height="32px" src="{{rev.tvg_logo}}"/>
                                            {{ rev.name }}
                                        </td>
                                        <td>
                                            {{ ['PROXY','VOD_PROXY','RELAY', 'ENCODE', 'TIMESHIFT_PLAYER',
                                            'TIMESHIFT_RECORDER',
                                            'CATCHUP', 'TEST_LIFE', 'VOD_RELAY', 'VOD_ENCODE', 'COD_RELAY',
                                            'COD_ENCODE', 'EVENT'][rev.type] }}
                                        </td>
                                        <td>{{ ['NEW', 'INIT', 'STARTED', 'READY', 'PLAYING', 'FROZEN',
                                            'WAITING'][rev.status] }}
                                        </td>
                                        <td>{{ rev.restarts }}</td>
                                        <td>{{ rev.cpu | round(2, 'floor') }}</td>
                                        <td>{{ (rev.rss / (1024 * 1024)) | round(4, 'floor') }}</td>
                                        <td>{{ (rev.input_streams|sum(attribute='bps') / (1024 * 1024 / 8)) | round(4,
                                            'floor') }}
                                        </td>
                                        <td>{{ (rev.output_streams|sum(attribute='bps') / (1024 * 1024 / 8))| round(4,
                                            'floor') }}
                                        </td>
                                        <td>{{ (rev.timestamp - rev.start_time)/1000 }}</td>
                                        <td>{{ (rev.timestamp - rev.loop_start_time)/1000 }}</td>
                                        <td>{{ rev.quality | round(2, 'floor') }}
                                        </td>
                                        <td>{{ rev.price }}</td>
                                        <td>{{ rev.view_count }}</td>
                                        <td>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="start_stream(this, '{{ rev.id }}')">
                                                Start
                                            </button>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="stop_stream(this, '{{ rev.id }}')">
                                                Stop
                                            </button>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="restart_stream(this, '{{ rev.id }}')">
                                                Restart
                                            </button>
                                            <a href="{{ url_for('StreamView:play', sid=rev.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                Play
                                            </a>
                                            <button type="submit" class="btn btn-success btn-xs"
                                                    onclick="edit_stream('{{ rev.id }}')">
                                                Edit
                                            </button>
                                            <button type="submit" class="btn btn-danger btn-xs"
                                                    onclick="remove_stream('{{ rev.id }}')">
                                                Remove
                                            </button>
                                            {% if (role == 2) %}
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="get_log_stream('{{ rev.id }}')">
                                                Get log
                                            </button>
                                            <a href="{{ url_for('StreamView:view_log', sid=rev.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                View log
                                            </a>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="get_pipeline_stream('{{ rev.id }}')">
                                                GPL
                                            </button>
                                            <a href="{{ url_for('StreamView:view_pipeline', sid=rev.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                VPL
                                            </a>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="row">
                                <button class="btn btn-success btn-send col-md-3" onclick="add_relay_stream()">
                                    Add relay
                                </button>
                                <button class="btn btn-success btn-send col-md-3" onclick="add_encode_stream()">
                                    Add encode
                                </button>
                                <button class="btn btn-success btn-send col-md-3"
                                        onclick="add_timeshift_recorder_stream()">
                                    Add timeshift recorder
                                </button>
                                <button class="btn btn-success btn-send col-md-3"
                                        onclick="add_timeshift_player_stream()">
                                    Add timeshift player
                                </button>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="vods">
                            <div class="row">
                                <table id='vods_table' class="table">
                                    <thead>
                                    <tr>
                                        <th class="stream_number">#</th>
                                        <th class="stream_name">Name</th>
                                        <th class="stream_type">Type</th>
                                        <th class="stream_status">Status</th>
                                        <th class="stream_restarts">Restarts</th>
                                        <th class="stream_cpu">CPU (%)</th>
                                        <th class="stream_rss">RSS (MB)</th>
                                        <th class="stream_inbps">In (Mbps)</th>
                                        <th class="stream_outbps">Out (Mbps)</th>
                                        <th class="stream_work_time">TTL (sec)</th>
                                        <th class="stream_live_time">RTL (sec)</th>
                                        <th class="stream_quality">Quality (%)</th>
                                        <th class="stream_price">Price ($)</th>
                                        <th class="stream_view">Views</th>
                                        <th class="stream_actions">Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for vod in vods %}
                                    <tr id='{{ vod.id }}'>
                                        <td>{{ loop.index }}</td>
                                        <td>
                                            <img width="32px" height="32px" src="{{vod.tvg_logo}}"/>
                                            {{ vod.name }}
                                        </td>
                                        <td>
                                            {{ ['PROXY','VOD_PROXY','RELAY', 'ENCODE', 'TIMESHIFT_PLAYER',
                                            'TIMESHIFT_RECORDER',
                                            'CATCHUP',
                                            'TEST_LIFE',
                                            'VOD_RELAY', 'VOD_ENCODE'][vod.type] }}
                                        </td>
                                        <td>{{ ['NEW', 'INIT', 'STARTED', 'READY', 'PLAYING', 'FROZEN',
                                            'WAITING'][vod.status] }}
                                        </td>
                                        <td>{{ vod.restarts }}</td>
                                        <td>{{ vod.cpu | round(2, 'floor') }}</td>
                                        <td>{{ (vod.rss / (1024 * 1024)) | round(4, 'floor') }}</td>
                                        <td>{{ (vod.input_streams|sum(attribute='bps') / (1024 * 1024 / 8)) | round(4,
                                            'floor')}}
                                        </td>
                                        <td>{{ (vod.output_streams|sum(attribute='bps') / (1024 * 1024 / 8)) | round(4,
                                            'floor') }}
                                        </td>
                                        <td>{{ (vod.timestamp - vod.start_time)/1000 }}</td>
                                        <td>{{ (vod.timestamp - vod.loop_start_time)/1000 }}</td>
                                        <td>{{ vod.quality | round(2, 'floor') }}</td>
                                        <td>{{ vod.price }}</td>
                                        <td>{{ vod.view_count }}</td>
                                        <td>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="start_stream(this, '{{ vod.id }}')">
                                                Refresh
                                            </button>
                                            <a href="{{ url_for('StreamView:play', sid=vod.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                Play
                                            </a>
                                            <button type="submit" class="btn btn-success btn-xs"
                                                    onclick="edit_stream('{{ vod.id }}')">
                                                Edit
                                            </button>
                                            {% if (role == 2) %}
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="get_log_stream('{{ vod.id }}')">
                                                Get log
                                            </button>
                                            <a href="{{ url_for('StreamView:view_log', sid=vod.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                View log
                                            </a>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="get_pipeline_stream('{{ vod.id }}')">
                                                GPL
                                            </button>
                                            <a href="{{ url_for('StreamView:view_pipeline', sid=vod.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                VPL
                                            </a>
                                            {% endif %}
                                            <button type="submit" class="btn btn-danger btn-xs"
                                                    onclick="remove_stream('{{ vod.id }}')">
                                                Remove
                                            </button>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="row">
                                <button class="btn btn-info btn-send col-md-6" onclick="add_vod_relay_stream()">
                                    Add vod relay
                                </button>
                                <button class="btn btn-info btn-send col-md-6" onclick="add_vod_encode_stream()">
                                    Add vod encode
                                </button>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="cods">
                            <div class="row">
                                <table id='cods_table' class="table">
                                    <thead>
                                    <tr>
                                        <th class="stream_number">#</th>
                                        <th class="stream_name">Name</th>
                                        <th class="stream_type">Type</th>
                                        <th class="stream_status">Status</th>
                                        <th class="stream_restarts">Restarts</th>
                                        <th class="stream_cpu">CPU (%)</th>
                                        <th class="stream_rss">RSS (MB)</th>
                                        <th class="stream_inbps">In (Mbps)</th>
                                        <th class="stream_outbps">Out (Mbps)</th>
                                        <th class="stream_work_time">TTL (sec)</th>
                                        <th class="stream_live_time">RTL (sec)</th>
                                        <th class="stream_quality">Quality (%)</th>
                                        <th class="stream_price">Price ($)</th>
                                        <th class="stream_view">Views</th>
                                        <th class="stream_actions">Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for cod in cods %}
                                    <tr id='{{ cod.id }}'>
                                        <td>{{ loop.index }}</td>
                                        <td>
                                            <img width="32px" height="32px" src="{{cod.tvg_logo}}"/>
                                            {{ cod.name }}
                                        </td>
                                        <td>
                                            {{ ['PROXY','VOD_PROXY','RELAY', 'ENCODE', 'TIMESHIFT_PLAYER',
                                            'TIMESHIFT_RECORDER',
                                            'CATCHUP',
                                            'TEST_LIFE', 'VOD_RELAY', 'VOD_ENCODE',
                                            'COD_RELAY', 'COD_ENCODE', 'EVENT'][cod.type] }}
                                        </td>
                                        <td>{{ ['NEW', 'INIT', 'STARTED', 'READY', 'PLAYING', 'FROZEN',
                                            'WAITING'][cod.status] }}
                                        </td>
                                        <td>{{ cod.restarts }}</td>
                                        <td>{{ cod.cpu | round(2, 'floor') }}</td>
                                        <td>{{ (cod.rss / (1024 * 1024)) | round(4, 'floor') }}</td>
                                        <td>{{ (cod.input_streams|sum(attribute='bps') / (1024 * 1024 / 8)) | round(4,
                                            'floor')}}
                                        </td>
                                        <td>{{ (cod.output_streams|sum(attribute='bps') / (1024 * 1024 / 8)) | round(4,
                                            'floor') }}
                                        </td>
                                        <td>{{ (cod.timestamp - cod.start_time)/1000 }}</td>
                                        <td>{{ (cod.timestamp - cod.loop_start_time)/1000 }}</td>
                                        <td>{{ cod.quality | round(2, 'floor') }}</td>
                                        <td>{{ cod.price }}</td>
                                        <td>{{ cod.view_count }}</td>
                                        <td>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="start_stream(this, '{{ cod.id }}')">
                                                Start
                                            </button>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="stop_stream(this, '{{ cod.id }}')">
                                                Stop
                                            </button>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="restart_stream(this, '{{ cod.id }}')">
                                                Restart
                                            </button>
                                            <a href="{{ url_for('StreamView:play', sid=cod.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                Play
                                            </a>
                                            <button type="submit" class="btn btn-success btn-xs"
                                                    onclick="edit_stream('{{ cod.id }}')">
                                                Edit
                                            </button>
                                            <button type="submit" class="btn btn-danger btn-xs"
                                                    onclick="remove_stream('{{ cod.id }}')">
                                                Remove
                                            </button>
                                            {% if (role == 2) %}
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="get_log_stream('{{ cod.id }}')">
                                                Get log
                                            </button>
                                            <a href="{{ url_for('StreamView:view_log', sid=cod.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                View log
                                            </a>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="get_pipeline_stream('{{ cod.id }}')">
                                                GPL
                                            </button>
                                            <a href="{{ url_for('StreamView:view_pipeline', sid=cod.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                VPL
                                            </a>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="row">
                                <button class="btn btn-info btn-send col-md-6" onclick="add_cod_relay_stream()">
                                    Add cod relay
                                </button>
                                <button class="btn btn-info btn-send col-md-6" onclick="add_cod_encode_stream()">
                                    Add cod encode
                                </button>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="proxy">
                            <div class="row">
                                <table id='proxy_table' class="table">
                                    <thead>
                                    <tr>
                                        <th class="stream_number">#</th>
                                        <th class="stream_name">Name</th>
                                        <th class="stream_type">Type</th>
                                        <th class="stream_price">Price ($)</th>
                                        <th class="stream_view">Views</th>
                                        <th class="stream_actions">Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for proxy in proxies %}
                                    <tr id='{{ proxy.id }}'>
                                        <td>{{ loop.index }}</td>
                                        <td>
                                            <img width="32px" height="32px" src="{{proxy.tvg_logo}}"/>
                                            {{ proxy.name }}
                                        </td>
                                        <td>
                                            {{ ['PROXY','VOD_PROXY','RELAY', 'ENCODE', 'TIMESHIFT_PLAYER',
                                            'TIMESHIFT_RECORDER',
                                            'CATCHUP',
                                            'TEST_LIFE',
                                            'VOD_RELAY', 'VOD_ENCODE','COD_RELAY', 'COD_ENCODE', 'EVENT'][proxy.type] }}
                                        </td>
                                        <td>{{ proxy.price }}</td>
                                        <td>{{ proxy.view_count }}</td>
                                        <td>
                                            <a href="{{ url_for('StreamView:play', sid=proxy.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                Play
                                            </a>
                                            <button type="submit" class="btn btn-success btn-xs"
                                                    onclick="edit_stream('{{ proxy.id }}')">
                                                Edit
                                            </button>
                                            <button type="submit" class="btn btn-danger btn-xs"
                                                    onclick="remove_stream('{{ proxy.id }}')">
                                                Remove
                                            </button>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="row">
                                <button class="btn btn-warning btn-send col-md-4" onclick="add_proxy_stream()">
                                    Add proxy stream
                                </button>
                                <button class="btn btn-warning btn-send col-md-4" onclick="add_proxy_vod()">
                                    Add proxy vod
                                </button>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="catchups">
                            <div class="row">
                                <table id='catchups_table' class="table">
                                    <thead>
                                    <tr>
                                        <th class="stream_number">#</th>
                                        <th class="stream_name">Name</th>
                                        <th class="stream_type">Type</th>
                                        <th class="stream_status">Status</th>
                                        <th class="stream_restarts">Restarts</th>
                                        <th class="stream_cpu">CPU (%)</th>
                                        <th class="stream_rss">RSS (MB)</th>
                                        <th class="stream_inbps">In (Mbps)</th>
                                        <th class="stream_outbps">Out (Mbps)</th>
                                        <th class="stream_work_time">TTL (sec)</th>
                                        <th class="stream_live_time">RTL (sec)</th>
                                        <th class="stream_quality">Quality (%)</th>
                                        <th class="stream_price">Price ($)</th>
                                        <th class="stream_view">Views</th>
                                        <th class="stream_actions">Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for catchup in catchups %}
                                    <tr id='{{ catchup.id }}'>
                                        <td>{{ loop.index }}</td>
                                        <td>
                                            <img width="32px" height="32px" src="{{catchup.tvg_logo}}"/>
                                            {{ catchup.name }}
                                        </td>
                                        <td>
                                            {{ ['PROXY','VOD_PROXY','RELAY', 'ENCODE', 'TIMESHIFT_PLAYER',
                                            'TIMESHIFT_RECORDER',
                                            'CATCHUP', 'TEST_LIFE', 'VOD_RELAY', 'VOD_ENCODE', 'COD_RELAY',
                                            'COD_ENCODE', 'EVENT'][catchup.type] }}
                                        </td>
                                        <td>{{ ['NEW', 'INIT', 'STARTED', 'READY', 'PLAYING', 'FROZEN',
                                            'WAITING'][catchup.status] }}
                                        </td>
                                        <td>{{ catchup.restarts }}</td>
                                        <td>{{ catchup.cpu | round(2, 'floor') }}</td>
                                        <td>{{ (catchup.rss / (1024 * 1024)) | round(4, 'floor') }}</td>
                                        <td>{{ (catchup.input_streams|sum(attribute='bps') / (1024 * 1024 / 8)) |
                                            round(4,
                                            'floor') }}
                                        </td>
                                        <td>{{ (catchup.output_streams|sum(attribute='bps') / (1024 * 1024 / 8))|
                                            round(4,
                                            'floor') }}
                                        </td>
                                        <td>{{ (catchup.timestamp - catchup.start_time)/1000 }}</td>
                                        <td>{{ (catchup.timestamp - catchup.loop_start_time)/1000 }}</td>
                                        <td>{{ catchup.quality | round(2, 'floor') }}
                                        </td>
                                        <td>{{ catchup.price }}</td>
                                        <td>{{ catchup.view_count }}</td>
                                        <td>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="start_stream(this, '{{ catchup.id }}')">
                                                Start
                                            </button>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="stop_stream(this, '{{ catchup.id }}')">
                                                Stop
                                            </button>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="restart_stream(this, '{{ catchup.id }}')">
                                                Restart
                                            </button>
                                            <a href="{{ url_for('StreamView:play', sid=catchup.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                Play
                                            </a>
                                            <button type="submit" class="btn btn-success btn-xs"
                                                    onclick="edit_stream('{{ catchup.id }}')">
                                                Edit
                                            </button>
                                            <button type="submit" class="btn btn-danger btn-xs"
                                                    onclick="remove_stream('{{ catchup.id }}')">
                                                Remove
                                            </button>
                                            {% if (role == 2) %}
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="get_log_stream('{{ catchup.id }}')">
                                                Get log
                                            </button>
                                            <a href="{{ url_for('StreamView:view_log', sid=catchup.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                View log
                                            </a>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="get_pipeline_stream('{{ catchup.id }}')">
                                                GPL
                                            </button>
                                            <a href="{{ url_for('StreamView:view_pipeline', sid=catchup.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                VPL
                                            </a>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="row">
                                <button class="btn btn-warning btn-send col-md-12" onclick="add_catchup_stream()">
                                    Add catchup
                                </button>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="events">
                            <div class="row">
                                <table id='events_table' class="table">
                                    <thead>
                                    <tr>
                                        <th class="stream_number">#</th>
                                        <th class="stream_name">Name</th>
                                        <th class="stream_type">Type</th>
                                        <th class="stream_status">Status</th>
                                        <th class="stream_restarts">Restarts</th>
                                        <th class="stream_cpu">CPU (%)</th>
                                        <th class="stream_rss">RSS (MB)</th>
                                        <th class="stream_inbps">In (Mbps)</th>
                                        <th class="stream_outbps">Out (Mbps)</th>
                                        <th class="stream_work_time">TTL (sec)</th>
                                        <th class="stream_live_time">RTL (sec)</th>
                                        <th class="stream_quality">Quality (%)</th>
                                        <th class="stream_price">Price ($)</th>
                                        <th class="stream_view">Views</th>
                                        <th class="stream_actions">Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for event in events %}
                                    <tr id='{{ event.id }}'>
                                        <td>{{ loop.index }}</td>
                                        <td>
                                            <img width="32px" height="32px" src="{{event.tvg_logo}}"/>
                                            {{ event.name }}
                                        </td>
                                        <td>
                                            {{ ['PROXY','VOD_PROXY','RELAY', 'ENCODE', 'TIMESHIFT_PLAYER',
                                            'TIMESHIFT_RECORDER',
                                            'CATCHUP',
                                            'TEST_LIFE', 'VOD_RELAY', 'VOD_ENCODE',
                                            'COD_RELAY', 'COD_ENCODE', 'EVENT'][event.type] }}
                                        </td>
                                        <td>{{ ['NEW', 'INIT', 'STARTED', 'READY', 'PLAYING', 'FROZEN',
                                            'WAITING'][event.status] }}
                                        </td>
                                        <td>{{ event.restarts }}</td>
                                        <td>{{ event.cpu | round(2, 'floor') }}</td>
                                        <td>{{ (event.rss / (1024 * 1024)) | round(4, 'floor') }}</td>
                                        <td>{{ (event.input_streams|sum(attribute='bps') / (1024 * 1024 / 8)) | round(4,
                                            'floor')}}
                                        </td>
                                        <td>{{ (event.output_streams|sum(attribute='bps') / (1024 * 1024 / 8)) |
                                            round(4,
                                            'floor') }}
                                        </td>
                                        <td>{{ (event.timestamp - event.start_time)/1000 }}</td>
                                        <td>{{ (event.timestamp - event.loop_start_time)/1000 }}</td>
                                        <td>{{ event.quality | round(2, 'floor') }}</td>
                                        <td>{{ event.price }}</td>
                                        <td>{{ event.view_count }}</td>
                                        <td>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="start_stream(this, '{{ event.id }}')">
                                                Schedule
                                            </button>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="stop_stream(this, '{{ event.id }}')">
                                                Cancel
                                            </button>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="restart_stream(this, '{{ event.id }}')">
                                                Restart
                                            </button>
                                            <a href="{{ url_for('StreamView:play', sid=event.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                Play
                                            </a>
                                            <button type="submit" class="btn btn-success btn-xs"
                                                    onclick="edit_stream('{{ event.id }}')">
                                                Edit
                                            </button>
                                            <button type="submit" class="btn btn-danger btn-xs"
                                                    onclick="remove_stream('{{ event.id }}')">
                                                Remove
                                            </button>
                                            {% if (role == 2) %}
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="get_log_stream('{{ event.id }}')">
                                                Get log
                                            </button>
                                            <a href="{{ url_for('StreamView:view_log', sid=event.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                View log
                                            </a>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="get_pipeline_stream('{{ event.id }}')">
                                                GPL
                                            </button>
                                            <a href="{{ url_for('StreamView:view_pipeline', sid=event.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                VPL
                                            </a>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="row">
                                <button class="btn btn-info btn-send col-md-12" onclick="add_event_stream()">
                                    Add event
                                </button>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tests">
                            <div class="row">
                                <table id='tests_table' class="table">
                                    <thead>
                                    <tr>
                                        <th class="stream_number">#</th>
                                        <th class="stream_name">Name</th>
                                        <th class="stream_type">Type</th>
                                        <th class="stream_status">Status</th>
                                        <th class="stream_restarts">Restarts</th>
                                        <th class="stream_cpu">CPU (%)</th>
                                        <th class="stream_rss">RSS (MB)</th>
                                        <th class="stream_inbps">In (Mbps)</th>
                                        <th class="stream_outbps">Out (Mbps)</th>
                                        <th class="stream_work_time">TTL (sec)</th>
                                        <th class="stream_live_time">RTL (sec)</th>
                                        <th class="stream_quality">Quality (%)</th>
                                        <th class="stream_price">Price ($)</th>
                                        <th class="stream_view">Views</th>
                                        <th class="stream_actions">Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for test in tests %}
                                    <tr id='{{ test.id }}'>
                                        <td>{{ loop.index }}</td>
                                        <td>
                                            <img width="32px" height="32px" src="{{test.tvg_logo}}"/>
                                            {{ test.name }}
                                        </td>
                                        <td>
                                            {{ ['PROXY','VOD_PROXY','RELAY', 'ENCODE', 'TIMESHIFT_PLAYER',
                                            'TIMESHIFT_RECORDER',
                                            'CATCHUP', 'TEST_LIFE', 'VOD_RELAY', 'VOD_ENCODE', 'COD_RELAY',
                                            'COD_ENCODE', 'EVENT'][test.type] }}
                                        </td>
                                        <td>{{ ['NEW', 'INIT', 'STARTED', 'READY', 'PLAYING', 'FROZEN',
                                            'WAITING'][test.status] }}
                                        </td>
                                        <td>{{ test.restarts }}</td>
                                        <td>{{ test.cpu | round(2, 'floor') }}</td>
                                        <td>{{ (test.rss / (1024 * 1024)) | round(4, 'floor') }}</td>
                                        <td>{{ (test.input_streams|sum(attribute='bps') / (1024 * 1024 / 8)) | round(4,
                                            'floor') }}
                                        </td>
                                        <td>{{ (test.output_streams|sum(attribute='bps') / (1024 * 1024 / 8))| round(4,
                                            'floor') }}
                                        </td>
                                        <td>{{ (test.timestamp - test.start_time)/1000 }}</td>
                                        <td>{{ (test.timestamp - test.loop_start_time)/1000 }}</td>
                                        <td>{{ test.quality | round(2, 'floor') }}
                                        </td>
                                        <td>{{ test.price }}</td>
                                        <td>{{ test.view_count }}</td>
                                        <td>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="start_stream(this, '{{ test.id }}')">
                                                Start
                                            </button>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="stop_stream(this, '{{ test.id }}')">
                                                Stop
                                            </button>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="restart_stream(this, '{{ test.id }}')">
                                                Restart
                                            </button>
                                            <a href="{{ url_for('StreamView:play', sid=test.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                Play
                                            </a>
                                            <button type="submit" class="btn btn-success btn-xs"
                                                    onclick="edit_stream('{{ test.id }}')">
                                                Edit
                                            </button>
                                            <button type="submit" class="btn btn-danger btn-xs"
                                                    onclick="remove_stream('{{ test.id }}')">
                                                Remove
                                            </button>
                                            {% if (role == 2) %}
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="get_log_stream('{{ test.id }}')">
                                                Get log
                                            </button>
                                            <a href="{{ url_for('StreamView:view_log', sid=test.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                View log
                                            </a>
                                            <button type="submit"
                                                    {% if (service.status== service.status.ACTIVE) %}
                                                    class="btn btn-success btn-xs"
                                                    {% else %}
                                                    class="btn btn-success btn-xs" disabled
                                                    {% endif %}
                                                    onclick="get_pipeline_stream('{{ test.id }}')">
                                                GPL
                                            </button>
                                            <a href="{{ url_for('StreamView:view_pipeline', sid=test.id) }}"
                                               class="btn btn-info btn-xs"
                                               role="button">
                                                VPL
                                            </a>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="row">
                                <button class="btn btn-success btn-send col-md-12" onclick="add_test_life_stream()">
                                    Add test life
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <button type="submit"
                        {% if (service.status== service.status.ACTIVE) %}
                        class="btn btn-success"
                        {% else %}
                        class="btn btn-success" disabled
                        {% endif %}
                        onclick="start_all_streams()">
                    Start all streams
                </button>
                <button type="submit"
                        {% if (service.status== service.status.ACTIVE) %}
                        class="btn btn-warning"
                        {% else %}
                        class="btn btn-warning" disabled
                        {% endif %}
                        onclick="stop_all_streams()">
                    Stop all streams
                </button>
                <button type="submit" class="btn btn-danger"
                        onclick="remove_all_streams()">
                    Remove all streams
                </button>
            </div>
        </div>
    </div>
</div>

<div id="stream_dialog" class="modal fade" tabindex=-1 role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript"
        src="{{ url_for('static', filename='assets/js/socket.io/1.7.4/socket.io.min.js') }}"></script>
<script type="text/javascript" charset="utf-8">
    // service
    function OnServerChanged(value){
        var url = '/change_current_server/' + value;
        $.get(url, function(data) {
            window.location.reload();
        });
    }

    var socket = io.connect('{{ config['PREFERRED_URL_SCHEME'] }}' + '://' + document.domain + ':' + location.port);
    socket.on('connect', function() {
    });
    socket.on('stream_data_changed_{{ service.id }}', function(stream) {
      const kStatuses = ['NEW', 'INIT', 'STARTED', 'READY', 'PLAYING', 'FROZEN', 'WAITING'];
      var table = document.getElementById("streams_table");
      var row = $('#' + stream.id + ' td');
      row.eq(3).text(kStatuses[stream.status]);
      row.eq(4).text(stream.restarts);
      row.eq(5).text(stream.cpu.toFixed(2));
      row.eq(6).text((stream.rss / (1024 * 1024)).toFixed(4));
      var in_bps = 0;
      for(var i in stream.input_streams) {
        in_bps += stream.input_streams[i].bps;
      }
      row.eq(7).text((in_bps / (1024 * 1024 / 8)).toFixed(4));
      var out_bps = 0;
      for(var i in stream.output_streams) {
        out_bps += stream.output_streams[i].bps;
      }
      row.eq(8).text((out_bps / (1024 * 1024 / 8)).toFixed(4));
      max_work_time = (stream.timestamp - stream.start_time)
      row.eq(9).text(max_work_time/1000);
      loop_work_time = stream.timestamp - stream.loop_start_time
      row.eq(10).text(loop_work_time/1000);
      row.eq(11).text(stream.quality.toFixed(2));
      row.eq(12).text(stream.price);
    });
    socket.on('service_data_changed_{{ service.id }}', function(service) {
      var service_id = $('#service_id');
      service_id.text(service.id);
      var service_uptime = $('#service_uptime');
      service_uptime.text(service.uptime + ' Seconds');
      var service_load_average = $('#service_load_average');
      service_load_average.text(service.load_average);
      var service_cpu = $('#service_cpu');
      service_cpu.text(service.cpu.toFixed(2) + ' %');
      var service_gpu = $('#service_gpu');
      service_gpu.text(service.gpu.toFixed(2) + ' %');
      var service_bandwidth_in = $('#service_bandwidth_in');
      service_bandwidth_in.text((service.bandwidth_in / (1024 * 1024 / 8)).toFixed(4) + ' Mbps');
      var service_bandwidth_out = $('#service_bandwidth_out');
      service_bandwidth_out.text((service.bandwidth_out / (1024 * 1024 / 8)).toFixed(4) + ' Mbps');
      var service_os = $('#service_os');
      service_os.text(service.os);
      var service_exp_time = $('#service_exp_time');
      var exp_datetime = new Date(service.exp_time);
      service_exp_time.text(exp_datetime.toISOString());
      var service_version = $('#service_version');
      service_version.text(service.version);
      var service_status = $('#service_status');
      const kStatuses = ['INIT', 'CONNECTED', 'ACTIVE'];
      service_status.text(kStatuses[service.status]);
      var service_sync = $('#service_sync');
      var sync_datetime = new Date(service.synctime);
      service_sync.text(sync_datetime.toISOString());
      var service_memory_total = $('#service_memory_total');
      service_memory_total.text((service.memory_total / (1024 * 1024)).toFixed(4) + ' MB');
      var service_memory_free = $('#service_memory_free');
      service_memory_free.text((service.memory_free / (1024 * 1024)).toFixed(4) + ' MB');
      var service_hdd_total = $('#service_hdd_total');
      service_hdd_total.text((service.hdd_total / (1024 * 1024)).toFixed(4)  + ' MB');
      var service_hdd_free = $('#service_hdd_free');
      service_hdd_free.text((service.hdd_free / (1024 * 1024)).toFixed(4)  + ' MB');
      var service_timestamp = $('#service_timestamp');
      var current_datetime = new Date(service.timestamp);
      service_timestamp.text(current_datetime.toISOString());

      var service_connections = $('#service_connections');
      service_connections.text(service.online_users);
    });
    // stream
    function add_stream_entry(url) {
        $.ajax({
            url: url,
            type: "POST",
            dataType: 'json',
            data: $('#stream_entry_form').serialize(),
            success: function (response) {
                console.log(response);
                $('#stream_dialog').modal('hide');
                window.location.reload();
            },
            error: function (error) {
                console.error(error);
                $('#stream_dialog .modal-content').html(data);
            }
        });
    }

    function edit_stream_entry(url) {
        var data_ser = $('#stream_entry_form').serialize();
        $.ajax({
            url: url,
            type: "POST",
            dataType: 'json',
            data: data_ser,
            success: function (response) {
                console.log(response);
                $('#stream_dialog').modal('hide');
                window.location.reload();
            },
            error: function (error) {
                console.error(error);
                $('#stream_dialog .modal-content').html(data);
            }
        });
    }
    function add_relay_stream() {
        var url = "{{ url_for('StreamView:add_relay') }}";
        $.get(url, function(data) {
            $('#stream_dialog .modal-content').html(data);
            $('#stream_dialog').modal();

            $('#submit').click(function(event) {
                event.preventDefault();
                add_stream_entry(url);
            })
        });
    }
    function add_encode_stream() {
        var url = "{{ url_for('StreamView:add_encode') }}";
        $.get(url, function(data) {
            $('#stream_dialog .modal-content').html(data);
            $('#stream_dialog').modal();

            $('#submit').click(function(event) {
                event.preventDefault();
                add_stream_entry(url);
            })
        });
    }
    function add_timeshift_recorder_stream() {
        var url = "{{ url_for('StreamView:add_timeshift_recorder') }}";
        $.get(url, function(data) {
            $('#stream_dialog .modal-content').html(data);
            $('#stream_dialog').modal();

            $('#submit').click(function(event) {
                event.preventDefault();
                add_stream_entry(url);
            })
        });
    }
    function add_timeshift_player_stream() {
        var url = "{{ url_for('StreamView:add_timeshift_player') }}";
        $.get(url, function(data) {
            $('#stream_dialog .modal-content').html(data);
            $('#stream_dialog').modal();

            $('#submit').click(function(event) {
                event.preventDefault();
                add_stream_entry(url);
            })
        });
    }
    function add_catchup_stream() {
        var url = "{{ url_for('StreamView:add_catchup') }}";
        $.get(url, function(data) {
            $('#stream_dialog .modal-content').html(data);
            $('#stream_dialog').modal();

            $('#submit').click(function(event) {
                event.preventDefault();
                add_stream_entry(url);
            })
        });
    }
    function add_test_life_stream() {
        var url = "{{ url_for('StreamView:add_test_life') }}";
        $.get(url, function(data) {
            $('#stream_dialog .modal-content').html(data);
            $('#stream_dialog').modal();

            $('#submit').click(function(event) {
                event.preventDefault();
                add_stream_entry(url);
            })
        });
    }
    function add_vod_relay_stream() {
        var url = "{{ url_for('StreamView:add_vod_relay') }}";
        $.get(url, function(data) {
            $('#stream_dialog .modal-content').html(data);
            $('#stream_dialog').modal();

            $('#submit').click(function(event) {
                event.preventDefault();
                add_stream_entry(url);
            })
        });
    }
    function add_vod_encode_stream() {
        var url = "{{ url_for('StreamView:add_vod_encode') }}";
        $.get(url, function(data) {
            $('#stream_dialog .modal-content').html(data);
            $('#stream_dialog').modal();

            $('#submit').click(function(event) {
                event.preventDefault();
                add_stream_entry(url);
            })
        });
    }
    function add_event_stream() {
        var url = "{{ url_for('StreamView:add_event') }}";
        $.get(url, function(data) {
            $('#stream_dialog .modal-content').html(data);
            $('#stream_dialog').modal();

            $('#submit').click(function(event) {
                event.preventDefault();
                add_stream_entry(url);
            })
        });
    }
    function add_cod_relay_stream() {
        var url = "{{ url_for('StreamView:add_cod_relay') }}";
        $.get(url, function(data) {
            $('#stream_dialog .modal-content').html(data);
            $('#stream_dialog').modal();

            $('#submit').click(function(event) {
                event.preventDefault();
                add_stream_entry(url);
            })
        });
    }
    function add_cod_encode_stream() {
        var url = "{{ url_for('StreamView:add_cod_encode') }}";
        $.get(url, function(data) {
            $('#stream_dialog .modal-content').html(data);
            $('#stream_dialog').modal();

            $('#submit').click(function(event) {
                event.preventDefault();
                add_stream_entry(url);
            })
        });
    }
    function add_proxy_stream() {
        var url = "{{ url_for('StreamView:add_proxy_stream') }}";
        $.get(url, function(data) {
            $('#stream_dialog .modal-content').html(data);
            $('#stream_dialog').modal();

            $('#submit').click(function(event) {
                event.preventDefault();
                add_stream_entry(url);
            })
        });
    }
    function add_proxy_vod() {
        var url = "{{ url_for('StreamView:add_proxy_vod') }}";
        $.get(url, function(data) {
            $('#stream_dialog .modal-content').html(data);
            $('#stream_dialog').modal();

            $('#submit').click(function(event) {
                event.preventDefault();
                add_stream_entry(url);
            })
        });
    }

    function edit_stream(sid) {
        var url = "/stream/edit/" + sid;
        $.get(url, function(data) {
            $('#stream_dialog .modal-content').html(data);
            $('#stream_dialog').modal();

            $('#submit').click(function(event) {
                event.preventDefault();
                edit_stream_entry(url);
            })
        });
    }

    // functions without modal dialog
    function stop_all_streams() {
        $.get({url: "{{ url_for('StreamView:stop_all_streams') }}",
            success: function (response) {
                console.log(response);
                window.location.reload();
            },
            error: function (error) {
                console.error(error);
            }
        });
    }

    function start_all_streams() {
        $.get({url: "{{ url_for('StreamView:start_all_streams') }}",
            success: function (response) {
                console.log(response);
                window.location.reload();
            },
            error: function (error) {
                console.error(error);
            }
        });
    }

    function remove_all_streams() {
        $.get({url: "{{ url_for('StreamView:remove_all_streams') }}",
            success: function (response) {
                console.log(response);
                window.location.reload();
            },
            error: function (error) {
                console.error(error);
            }
        });
    }
    function remove_stream(sid) {
        $.ajax({
            url: "{{ url_for('StreamView:remove') }}",
            type: "POST",
            contentType : 'application/json',
            data: JSON.stringify({sids: [sid]}),
            success: function (response) {
                console.log(response);
                window.location.reload();
            },
            error: function (error) {
                console.error(error);
            }
        });
    }
    function get_log_stream(sid) {
        $.ajax({
            url: "{{ url_for('StreamView:get_log') }}",
            type: "POST",
            dataType: 'json',
            data: {"sid":sid},
            success: function (response) {
                console.log(response);
                window.location.reload();
            },
            error: function (error) {
                console.error(error);
            }
        });
    }
    function get_pipeline_stream(sid) {
        $.ajax({
            url: "{{ url_for('StreamView:get_pipeline') }}",
            type: "POST",
            dataType: 'json',
            data: {"sid":sid},
            success: function (response) {
                console.log(response);
                window.location.reload();
            },
            error: function (error) {
                console.error(error);
            }
        });
    }
    function start_stream(button, sid) {
        button.blur();
        $.ajax({
            url: "{{ url_for('StreamView:start') }}",
            type: "POST",
            contentType : 'application/json',
            data: JSON.stringify({sids: [sid]}),
            success: function (response) {
                console.log(response);
                // window.location.reload();
            },
            error: function (error) {
                console.error(error);
            }
        });
    }
    function stop_stream(button, sid) {
        button.blur();
        $.ajax({
            url: "{{ url_for('StreamView:stop') }}",
            type: "POST",
            contentType : 'application/json',
            data: JSON.stringify({sids: [sid]}),
            success: function (response) {
                console.log(response);
                // window.location.reload();
            },
            error: function (error) {
                console.error(error);
            }
        });
    }
    function restart_stream(button, sid) {
        button.blur();
        $.ajax({
            url: "{{ url_for('StreamView:restart') }}",
            type: "POST",
            contentType : 'application/json',
            data: JSON.stringify({sids: [sid]}),
            success: function (response) {
                console.log(response);
                // window.location.reload();
            },
            error: function (error) {
                console.error(error);
            }
        });
    }
</script>
{% endblock %}
